<!--
 * @Descripttion: 
 * @version: 
 * @Author: 宁乃楚
 * @Date: 2021-07-02 14:44:51
 * @LastEditors: 宁乃楚
 * @LastEditTime: 2021-07-07 21:48:57
-->
<template>
  <!-- 订单详情界面 -->
  <div class="orderDetail">
    <!-- 顶部导航栏 -->
    <van-sticky>
      <van-nav-bar
        title="订单详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </van-sticky>
    <div class="card">
      <van-card
        v-for="item in order"
        :key="item.id"
        :title="item.product.name"
        :desc="item.product.description"
        :price="item.product.price + '.00'"
        :thumb="item.product.photo"
        :num="item.number"
      />
    </div>
    <div class="total">
      <van-card>
        <div slot="price">
          总计:<span style="color: red">{{
            "¥" + this.$route.query.order.total
          }}</span>
        </div>
      </van-card>
    </div>
    <div class="address">
      <van-card>
        <div slot="desc">
          <span
            >服务地址:{{
              this.$route.query.order.address.province +
              this.$route.query.order.address.city +
              this.$route.query.order.address.area +
              this.$route.query.order.address.address
            }}</span
          >
        </div>
        <div slot="desc">
          <span
            >联系方式:{{
              this.$route.query.order.customer.username +
              "(" +
              this.$route.query.order.customer.telephone +
              ")"
            }}</span
          >
        </div>
        <div slot="desc">
          <span
            >下单时间:{{ this.$route.query.order.orderTime | dateFormat }}</span
          >
        </div>
        <div slot="desc">
          <span
            >服务时间:{{
              this.$route.query.order.serviceTime | dateFormat
            }}</span
          >
        </div>
        <div slot="footer">
          <span>{{ "订单状态:" + this.$route.query.order.status }}</span>
        </div>
      </van-card>
      <div class="say">
        <van-button
          v-if="this.$route.query.order.status == '已完成'"
          @click="say()"
          type="primary"
          >发布评论</van-button
        >
        <van-action-sheet v-model="show" title="标题">
          <div class="content">
            <van-form @submit="onSubmit">
              <van-field
                v-model="talk"
                name="talk"
                label="评论"
                placeholder="评论内容"
                :rules="[{ required: true, message: '请输入评论' }]"
              />
              <div style="margin: 16px">
                <van-button round block type="info" native-type="submit"
                  >提交</van-button
                >
              </div>
            </van-form>
          </div>
        </van-action-sheet>
      </div>
       <van-card
        v-for="c in commentData"
        :key="c.id"
        :thumb="userInfo.userFace"
      >
      <div slot="title" style="text-align:center;font-size: 20px;">
        <span>订单评论</span>
      </div>
      <div slot="desc">
        <span>{{'评论内容:'+c.content}}</span>
         <br/>
        <span>{{c.commentTime|dateFormat}}</span>
      </div>
       </van-card>
    </div>
    <div style="height: 100px"></div>
    <div class="btn">
      <van-button
        v-if="this.$route.query.order.status == '待派单'"
        @click="cancel(orderId)"
        type="primary"
        >退单</van-button
      >
      <van-button
        v-else-if="this.$route.query.order.status == '待确认'"
        @click="confirmOrder(orderId)"
        type="warning"
        >确认</van-button
      >
      <template v-else-if="this.$route.query.order.status == '已完成'">
        <van-button @click="deleteOrder(orderId)" type="danger"
          >删除</van-button
        >
      </template>
    </div>
  </div>
</template>

<script>
import { get,post } from "@/http/axios";
// 引入vuex的辅助函数
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      //    点击跳转到产品页面时传递的Id
      order: this.$route.query.order.orderLines,
      orderId: this.$route.query.order.id,
      commentData: [],
      show: false,
      talk:''
    };
  },
  computed: {
    // 引入user vuex中的方法
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    // 引入user vuex中的方法
    ...mapActions("user", ["getUserInfo"]),
    // 返回上一个页面
    onClickLeft() {
      this.$router.go(-1);
    },
    // 退单
    async cancel(id) {
      const data = {
        id,
      };
      const res = await get("/order/deleteById", data);
      // 给用户一个成功或失败的提示
      if (res.status == 200) {
        this.$notify({
          message: "退单成功",
          type: "success",
        });
        this.$router.push("/manager/order");
      } else {
        this.$message.error(res.message);
      }
    },
    // 确认
    async confirmOrder(id) {
      const data = {
        orderId: id,
      };
      const res = await get("/order/confirmOrder", data);
      // 给用户一个成功或失败的提示
      if (res.status == 200) {
        this.$notify({
          message: "确认成功",
          type: "success",
        });
        this.$router.push("/manager/order");
      } else {
        this.$notify.error(res.message);
      }
    },
    // 删除
    async deleteOrder(id) {
      const data = {
        id,
      };
      const res = await get("/order/deleteById", data);
      // 给用户一个成功或失败的提示
      if (res.status == 200) {
        this.$notify({
          message: "删除成功",
          type: "success",
        });
        this.$router.push("/manager/order");
      } else {
        this.$notify.error(res.message);
      }
    },
    // 查询订单评论
    async orderComment() {
      let data = {
        page: 1,
        pageSize: 100,
        orderId: this.$route.query.order.id,
      };
      let res = await get("/orderComment/pageQuery", data);
      this.commentData = res.data.data.list;
    },
    say() {
      this.show = true;
    },
    async onSubmit(values) {
      let data={
        content:values.talk,
        orderId:this.order.id,
        customerId:this.userInfo.id
      }
      let res=await post("/orderComment/submit",data);
       if (res.status == 200) {
        this.$notify({
          message: "发布成功",
          type: "success",
        });
        this.$router.push("/manager/order");
      } else {
        this.$notify.error(res.message);
      }
    },
  },
  created() {
    this.getUserInfo();
    
     // 自动获取用户数据
    this.getUserInfo().then((res) => {
      // 自动获取订单数据
      this.orderComment();
    });
  },
};
</script>

<style scoped>
.total .van-card__price {
  float: right;
}
.orderDetail /deep/ .van-nav-bar__title {
  color: white !important;
  font-size: 16px;
}
.orderDetail /deep/ .van-nav-bar__text {
  color: white !important;
  font-size: 16px;
}
.orderDetail /deep/ .van-icon {
  color: white !important;
  font-size: 16px;
}
.orderDetail /deep/ .van-nav-bar {
  background-color: #fa5882;
  font-size: 16px;
}
.van-card {
  box-shadow: 0 0 6px 0 #ccc;
  width: 95%;
  left: 2.5%;
  border-radius: 15px;
  margin-bottom: 20px;
}
.btn {
  position: fixed;
  width: 100%;
  bottom: 10%;
}
.content .van-button{
  width: 40%;
}
.btn .van-button {
  width: 40%;
  left: 30%;
  border-radius: 999px;
}
.say .van-button {
  left: 50%;
  margin-left: -44px;
}
</style>